<template>
  <view class="home-container">
    <nav-bar
      bgColor="#ffb72f"
      titleColor="#fff"
      :supportWhiteBlack="true"
      :rightCustomerStyle="{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
      }"
    >
      <view slot="navLeft"> 哈哈生活圈·商户端 </view>
      <view slot="navContent" class="navContent">
        <div class="share" @click="handleShowShare">
          <u-icon name="share" size="24" color="#fffffff" />
        </div>
      </view>
    </nav-bar>
    <view class="container" id="guide-container">
      <official-account v-if="isShowOfficialAccount" />
      <data-board />
      <order-grid
        :attribute="orderGridAttribute"
        :guide_option="guide_option.guide_3"
      />
      <classify-grid :attribute="classifyGridAttribute" />
    </view>
    <!--    <low-code-page-->
    <!--      ref="lcpRef"-->
    <!--      hideNavbar-->
    <!--      v-if="pageData"-->
    <!--      :pageJson="pageData"-->
    <!--    />-->
    <!--    <button @click="jumpPages('orderList')">订单列表</button>-->
    <!--    <button @click="jumpPages('productList')">商品列表</button>-->
    <!--    <button @click="jumpPages('productClass')">商品分类</button>-->
    <!--    <button @click="jumpPages('deskManage')">桌码管理</button>-->
    <mask-guide ref="maskGuide" :lastIndex="lastIndex"> </mask-guide>
    <cus-tab-bar />
    <share-modal :showTitle="false" :visible.sync="isShowShare">
      <xh-img class="logo" :src="pubUserInfo.pubDomainShopVo.logo" />
    </share-modal>
  </view>
</template>

<script>
import { getWxConfig, isSubscribe } from "@/service/api/sp-common";
import { appSetStorage } from "@/utils/storage";
import officialAccount from "@/components/pageComponents/sp-home/official-account";
import shareModal from "@/components/pageComponents/sp-home/share-modal";
import dataBoard from "@/components/pageComponents/sp-home/databoard";
import maskGuide from "@/components/baseComponents/mask-guide";
import orderGrid from "@/components/pageComponents/sp-home/orderGrid";
import classifyGrid from "@/components/pageComponents/sp-home/classify-grid";
import { PUB_BUSINESS_WX_CONFIG_STORAGE_KEY } from "@/const/application/config";
import { CLASSIFY_GRID_OPTION, GRID_OPTION } from "@/pages/home/const";
import { guide_option } from "@/pages/home/const/mask-guide";
import { isFirstLogin } from "@/service/api/sp-common/user";
import {
  PUB_BUSINESS_MA_APPID,
  PUB_IS_FIRST_LOGIN,
} from "@/const/application/auth";
import { mapState } from "vuex";

export default {
  components: {
    classifyGrid,
    officialAccount,
    dataBoard,
    maskGuide,
    orderGrid,
    shareModal,
  },
  data() {
    return {
      isShowOfficialAccount: false,
      isShowShare: false,
      guide_option,
      orderGridAttribute: {
        type: "imageAndText",
        col: 4,
        list: GRID_OPTION,
      },
      classifyGridAttribute: {
        type: "imageAndText",
        col: 4,
        list: CLASSIFY_GRID_OPTION,
      },
    };
  },
  computed: {
    lastIndex() {
      let index = 0;
      for (const argumentsKey in guide_option) {
        index += 1;
      }
      return index;
    },
    ...mapState("sp-common/auth", ["token"]),
    ...mapState("sp-common/auth", ["pubUserInfo"]),
  },
  watch: {
    token: {
      handler(val) {
        if (val) {
          this.innitMaskGuide();
          this.$store.dispatch("sp-product/index/setCalssifyList");
          this.$store.dispatch("sp-product/index/setShopList");
        }
      },
      immediate: true,
    },
  },
  created() {
    this.innitConfig();
  },
  onLoad() {
    uni.showShareMenu({
      title: "哈哈生活圈·商户端",
    });
  },
  methods: {
    async innitConfig() {
      const res = await getWxConfig({ scope: 1 });
      appSetStorage(PUB_BUSINESS_WX_CONFIG_STORAGE_KEY, res);
    },
    async innitMaskGuide() {
      const isFirstLoginRes = await isFirstLogin();
      appSetStorage(PUB_IS_FIRST_LOGIN, isFirstLoginRes);
      uni.login({
        provider: "weixin", //使用微信登录
        success: async (loginRes) => {
          if (loginRes.errMsg === "login:ok") {
            const res = await isSubscribe({
              code: loginRes.code,
              appId: process.env.VUE_APP_WX_APP_ID,
            });
            if (res) {
              const { subscribe, maOpenId } = res;
              appSetStorage(PUB_BUSINESS_MA_APPID, maOpenId);
              this.isShowOfficialAccount = !subscribe;
            }
            if (isFirstLoginRes) {
              setTimeout(() => {
                this.$refs.maskGuide.start({
                  textStyle: {
                    fontSize: "28rpx",
                  },
                  showNextButton: true,
                });
              }, 200);
            }
          }
        },
      });
    },
    jumpPages(path) {
      this.$Router.push({
        name: path,
      });
    },
    handleShowShare() {
      this.isShowShare = true;
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  background-color: whitesmoke;
  min-height: 100vh;
}
.navContent {
}
.logo {
  width: 100%;
  height: 800rpx;
}
</style>
